<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <select v-for="(arrItem,key) in selectList" v-model="selectArr[key]" @focus="position=key" @change="selected" :key="key" style="margin:10px;padding:10px">
      <option v-for="item in arrItem" :value="item.value" :key="item.value">{{item.label}}</option>
    </select>
    <p>选中项: {{ selectArr }}</p>
  </div>
  
  <script>
    var vm = new Vue({
  el: '#app',
  data: {
    arr:     [
        {
          key: "gender",
          label: "性别",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          options: [
            {
              label: "男",
              value: 0,
            },
            {
              label: "女",
              value: 2,
            },
          ],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          key: "province",
          label: "省",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          // 联动层级
          linkageLevel: 0,
          // 是否联动
          linkage: true,
          // 上级联动数据key
          linkageKey: '',
          // 联动组标识
          linkageGroupFlag: 1,
          suffixIcon: '',
          prefixIcon: '',
          options: [
            {
              label: "北京市",
              value: 1,
              children: [
                {
                  label: "朝阳区",
                  value: 2,
                  children: [
                    {
                      label: "前门大街",
                      value: 3,
                    }
                  ]
                }
              ]
            },
            {
              label: "天津市",
              value: 4,
              children: [
                {
                  label: "南开区",
                  value: 5,
                  children: [
                    {
                      label: "天津站",
                      value: 6,
                    }
                  ]
                }
              ]
            }
          ],
          type: "select",
          check: false,
        },
        {
          key: "city",
          label: "市",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          linkage: true,
          linkageLevel: 1,
          linkageKey: 'province',
          linkageGroupFlag: 1,
          options: [],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          key: "area",
          label: "区",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          linkage: true,
          linkageLevel: 2,
          linkageKey: 'city',
          linkageGroupFlag: 1,
          options: [],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          key: "name",
          label: "姓名",
          options: [],
          elType: "input",
          type: "input",
          check: false,
          width: 220,
        },
        {
          width: 220,
          key: "org",
          label: "组织",
          elType: "org",
          check: true,
          treeData: {
            treeId: '',
            orgCodes: [],
            multiple: false,
            lazy: false,
            filterable: false,
            showField: '',
            emptyText: '无数据',
            defaultSelectedList: [],
            expandLevel: 1,
            expandAll: false,
            canSelectNoLeaf: false,
            dialogTitle: '选择组织',
            modalAppendToBody: true,
            appendToBody: false,
            treeTitle: '候选组织',
            noticeText: ''
          }
        },
        {
          width: 220,
          key: "identity",
          label: "人员",
          elType: "identity",
          check: true,
        },
        {
          width: 220,
          key: "groupOrg",
          label: "群组组织",
          elType: "groupOrg",
          check: true,
        },
        {
          width: 280,
          key: "groupIdentity",
          label: "群组人员",
          elType: "groupIdentity",
          check: true,
        },
        {
          key: "province1",
          label: "省",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          // 联动层级
          linkageLevel: 0,
          // 是否联动
          linkage: true,
          // 上级联动数据key
          linkageKey: '',
          // 联动组标识
          linkageGroupFlag: 2,
          suffixIcon: '',
          prefixIcon: '',
          options: [
            {
              label: "北京市",
              value: 1,
              children: [
                {
                  label: "朝阳区",
                  value: 2,
                  children: [
                    {
                      label: "前门大街",
                      value: 3,
                    }
                  ]
                }
              ]
            },
            {
              label: "天津市",
              value: 4,
              children: [
                {
                  label: "南开区",
                  value: 5,
                  children: [
                    {
                      label: "天津站",
                      value: 6,
                    }
                  ]
                }
              ]
            }
          ],
          type: "select",
          check: false,
        },
        {
          key: "city1",
          label: "市",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          linkage: true,
          linkageLevel: 1,
          linkageKey: 'province1',
          linkageGroupFlag: 2,
          options: [],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          key: "area1",
          label: "区",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          linkage: true,
          linkageLevel: 2,
          linkageKey: 'city1',
          linkageGroupFlag: 2,
          options: [],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
      ],
    position: null,
    selectArr: ['第1级-选项1'],
    selectList: [[{
      value: '第1级-选项1',
      label: '第1级-选项1'
    },
    {
      value: '第1级-选项2',
      label: '第1级-选项2'
    },
    {
      value: '第1级-选项3',
      label: '第1级-选项3'
    },
    {
      value: '第1级-选项4',
      label: '第1级-选项4'
    },
    {
      value: '第1级-选项5',
      label: '第1级-选项5'
    }]]
  },
  methods: {
    //模拟获取下一级选项（实际项目可通过接口获取或者根据实际情况自行修改）
    addSelectList(index) {
      return [{
        value: '第' + (index + 2) + '级-选项1',
        label: '第' + (index + 2) + '级-选项1'
      },
      {
        value: '第' + (index + 2) + '级-选项2',
        label: '第' + (index + 2) + '级-选项2'
      },
      {
        value: '第' + (index + 2) + '级-选项3',
        label: '第' + (index + 2) + '级-选项3'
      },
      {
        value: '第' + (index + 2) + '级-选项4',
        label: '第' + (index + 2) + '级-选项4'
      },
      {
        value: '第' + (index + 2) + '级-选项5',
        label: '第' + (index + 2) + '级-选项5'
      }]
    },
    selected(e) {
      var current = e.target.value;//获取选中值(实际项目可通过此值调接口获取下一级选项)
      var nextSelect = this.addSelectList(this.position); //模拟获取下一级选项
      console.log('原始', this.selectList);
      this.selectList.splice(this.position + 1, this.selectList.length, nextSelect);
      this.selectArr.splice(this.position + 1, this.selectArr.length);
      console.log(this.position, this.selectList.length, nextSelect);
      console.log('change', this.selectList);
      console.log(this.selectArr);
    },
  }
})
  </script>
</body>
</html>


<template>
  <div class="jdf-dynamic-table">
    <div class="dynamic-table-title">
      <div class="title-text">{{title}}</div>
      <div class="title-btn">
        <el-button size="small" type="primary" @click="add">添加</el-button>
        <el-button size="small" type="primary">插入</el-button>
        <el-button size="small" type="primary" @click="deleteAll">删除</el-button>
        <el-button size="small" type="primary" @click="disabledClick">修改</el-button>
      </div>
    </div>
    <el-form
      class="base-form"
      ref="baseForm"
      :model="baseForm"
      auto-complete="on"
    >
      <el-table
        ref="multipleTable"
        border
        :data="baseForm.tableList"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >

      <!-- tableDataOption[0] 传入数据第一项,用作表头 -->
      <!-- tableDataMap [[], []], 每一行的数据依赖 -->

      <el-table-column v-if="additionalShow" fixed="left" type="selection" width="65" align="center"> </el-table-column>
      <el-table-column
        v-for="(item, index) in tableDataOption[0]"
        :key="index"
        align="center"
        :label="item.label"
        :width="item.width"
      >
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableList.' + scope.$index + `.${tableDataMap[scope.$index][index].key}`"
              :rules="tableDataMap[scope.$index][index].rules"
              class="all"
            >
              <!-- 选组织 -->
              <div class="table-row" v-if="tableDataMap[scope.$index][index].elType === 'org'">
                <el-input
                  :disabled="inputDisabled"
                  @click.native="open(scope.$index, tableDataMap[scope.$index][index].key, 'orgTree')"
                  readonly
                  v-model="scope.row[tableDataMap[scope.$index][index].key]"
                >
                  <template slot="prepend">选组织</template>
                </el-input>
                <div
                  class="table-row-flag"
                  v-if="tableDataMap[scope.$index][index].rules && tableDataMap[scope.$index][index].rules.length"
                >
                  *
                </div>
              </div>

              <!-- 选人员 -->
              <div class="table-row" v-else-if="tableDataMap[scope.$index][index].elType === 'identity'">
                <el-input
                  :disabled="inputDisabled"
                  @click.native="open(scope.$index, tableDataMap[scope.$index][index].key, 'identityTree')"
                  readonly
                  v-model="scope.row[tableDataMap[scope.$index][index].key]"
                >
                  <template slot="prepend">选人员</template>
                </el-input>
                <div
                  class="table-row-flag"
                  v-if="tableDataMap[scope.$index][index].rules && tableDataMap[scope.$index][index].rules.length"
                >
                  *
                </div>
              </div>

              <!-- 群组组织 -->
              <div class="table-row" v-else-if="tableDataMap[scope.$index][index].elType === 'groupOrg'">
                <el-input
                  :disabled="inputDisabled"
                  @click.native="open(scope.$index, tableDataMap[scope.$index][index].key, 'orgTree')"
                  readonly
                  v-model="scope.row[tableDataMap[scope.$index][index].key]"
                >
                  <template slot="prepend">选组织</template>
                </el-input>
                <div
                  class="table-row-flag"
                  v-if="tableDataMap[scope.$index][index].rules && tableDataMap[scope.$index][index].rules.length"
                >
                  *
                </div>
              </div>

              <!-- 群组人员 -->
              <div class="table-row" v-else-if="tableDataMap[scope.$index][index].elType === 'groupIdentity'">
                <el-input
                  :disabled="inputDisabled"
                  @click.native="open(scope.$index, tableDataMap[scope.$index][index].key, 'identityTree')"
                  readonly
                  v-model="scope.row[tableDataMap[scope.$index][index].key]"
                >
                  <template slot="prepend">选人</template>
                </el-input>
                <div
                  class="table-row-flag"
                  v-if="tableDataMap[scope.$index][index].rules && tableDataMap[scope.$index][index].rules.length"
                >
                  *
                </div>
              </div>

              <!-- 级联选择器 -->
              <div class="table-row" v-else-if="tableDataMap[scope.$index][index].elType === 'cascader'">
                <el-cascader
                  v-model="scope.row[tableDataMap[scope.$index][index].key]"
                  :options="tableDataMap[scope.$index][index].options"
                  :props="{multiple: tableDataMap[scope.$index][index].cascaderConfig.multiple}"
                  clearable
                  @change="handleChange">
                </el-cascader>
              </div>

              <!-- 基础 -->
              <div class="table-row" v-else>
                <jdf-common-input
                  class="common-input"
                  v-model="scope.row[tableDataMap[scope.$index][index].key]"
                  :options="tableDataMap[scope.$index][index].options"
                  :el-type="tableDataMap[scope.$index][index].elType"
                  :type="tableDataMap[scope.$index][index].type"
                  clearable
                  :is-edit="!inputDisabled"
                  :maxlength="tableDataMap[scope.$index][index].maxlength"
                  :value-key="tableDataMap[scope.$index][index].valueKey"
                  :label-key="tableDataMap[scope.$index][index].labelKey"
                  :suffix-icon="tableDataMap[scope.$index][index].suffixIcon"
                  :prefix-icon="tableDataMap[scope.$index][index].prefixIcon"
                  @change="commonInput($event, tableDataMap[scope.$index][index], scope.$index )"
                ></jdf-common-input>
                <div
                  class="table-row-flag"
                  v-if="tableDataMap[scope.$index][index].rules && tableDataMap[scope.$index][index].rules.length"
                >
                  *
                </div>
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column v-if="additionalShow" align="center" fixed="right" width="50" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <i
              class="el-icon-close icon-delete"
              @click="deleteRow(scope.$index)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 选组织 -->
    <!-- <component
      v-for="(item, index) in orgComponents"
      :key="index"
      :is="item.name"
      :ref="item.ref"
      :tree-id="treeData.treeId"
      :org-codes="treeData.orgCodes"
      :lazy="treeData.lazy"
      :multiple="treeData.multiple"
      :filterable="treeData.filterable"
      :show-field="treeData.showField"
      :empty-text="treeData.emptyText"
      :notice-text="treeData.noticeText"
      :default-selected-list="treeData.defaultSelectedList"
      :expand-level="treeData.expandLevel"
      :expand-all="treeData.expandAll"
      :can-select-no-leaf="treeData.canSelectNoLeaf"
      :dialog-title="treeData.dialogTitle"
      :modal-append-to-body="treeData.modalAppendToBody"
      :append-to-body="treeData.appendToBody"
      :tree-title="treeData.treeTitle"
      @select="selectOrg"
    ></component> -->
    <jdf-org-tree
      ref="orgTree"
      :tree-id="treeData.treeId"
      :org-codes="treeData.orgCodes"
      :lazy="treeData.lazy"
      :multiple="treeData.multiple"
      :filterable="treeData.filterable"
      :show-field="treeData.showField"
      :empty-text="treeData.emptyText"
      :notice-text="treeData.noticeText"
      :default-selected-list="treeData.defaultSelectedList"
      :expand-level="treeData.expandLevel"
      :expand-all="treeData.expandAll"
      :can-select-no-leaf="treeData.canSelectNoLeaf"
      :dialog-title="treeData.dialogTitle"
      :modal-append-to-body="treeData.modalAppendToBody"
      :append-to-body="treeData.appendToBody"
      :tree-title="treeData.treeTitle"
      @select="selectOrg"
    ></jdf-org-tree>
    <!-- 选人员 -->
    <jdf-identity-tree
      ref="identityTree"
      @select="selectOrg"
      :tree-id="treeData.treeId"
      :org-codes="treeData.orgCodes"
      :lazy="treeData.lazy"
      :multiple="treeData.multiple"
      :filterable="treeData.filterable"
      :show-field="treeData.showField"
      :empty-text="treeData.emptyText"
      :notice-text="treeData.noticeText"
      :default-selected-list="treeData.defaultSelectedList"
      :expand-level="treeData.expandLevel"
      :expand-all="treeData.expandAll"
      :can-select-no-leaf="treeData.canSelectNoLeaf"
      :dialog-title="treeData.dialogTitle"
      :modal-append-to-body="treeData.modalAppendToBody"
      :append-to-body="treeData.appendToBody"
      :tree-title="treeData.treeTitle"
    ></jdf-identity-tree>
    <!-- 群组组织选择 -->
    <jdf-group-org-tree
      ref="orgTree"
      @select="selectOrg"
      :group-code="treeData.groupCode"
      :identity-id="treeData.identityId"
      :identities="treeData.identities"	
      :group-json="treeData.groupJson"
      :multiple="treeData.multiple"
      :filterable="treeData.filterable"
      :show-field="treeData.showField"
      :empty-text="treeData.emptyText"
      :notice-text="treeData.noticeText"
      :default-selected-list="treeData.defaultSelectedList"
      :expand-level="treeData.expandLevel"
      :expand-all="treeData.expandAll"
      :can-select-no-leaf="treeData.canSelectNoLeaf"
      :dialog-title="treeData.dialogTitle"
      :modal-append-to-body="treeData.modalAppendToBody"
      :append-to-body="treeData.appendToBody"
      :tree-title="treeData.treeTitle"
    ></jdf-group-org-tree>
    <!-- 群组人员选择 -->
    <jdf-group-identity-tree-transfer
      ref="identityTree"
      @select="selectOrg"
      :group-code="treeData.groupCode"
      :identity-id="treeData.identityId"
      :identities="treeData.identities"	
      :group-json="treeData.groupJson"
      :multiple="treeData.multiple"
      :filterable="treeData.filterable"
      :show-field="treeData.showField"
      :empty-text="treeData.emptyText"
      :notice-text="treeData.noticeText"
      :default-selected-list="treeData.defaultSelectedList"
      :expand-level="treeData.expandLevel"
      :expand-all="treeData.expandAll"
      :can-select-no-leaf="treeData.canSelectNoLeaf"
      :dialog-title="treeData.dialogTitle"
      :modal-append-to-body="treeData.modalAppendToBody"
      :append-to-body="treeData.appendToBody"
      :tree-title="treeData.treeTitle"
      :candidate-common-group="treeData.candidateCommonGroup"
      :login-name="treeData.loginName"
      :default-selected-each-org-first="treeData.defaultSelectedEachOrgFirst"
    ></jdf-group-identity-tree-transfer>
    <!-- <el-button @click="check">验证</el-button> -->
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep';
export default {
  name: "JdfDynamicTable",
  props: {
    title: {
      type: String,
      default: '出国人员名单'
    },
    tableData: {
      type: Array,
      default: () => [
          {
            gender: "",
            age: "",
            birthday: "",
            address: "",
            org: 999
          }
        ]
    },
    tableDataOption: {
      type: Array,
      default: () => [
        [
        {
          key: "gender",
          label: "性别",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          options: [
            {
              label: "男",
              value: 0,
            },
            {
              label: "女",
              value: 2,
            },
          ],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          key: "province",
          label: "省",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          // 联动层级
          linkageLevel: 0,
          // 是否联动
          linkage: true,
          // 上级联动数据key
          linkageKey: '',
          // 联动组标识
          linkageGroupFlag: 1,
          suffixIcon: '',
          prefixIcon: '',
          options: [
            {
              label: "北京市",
              value: 1,
              children: [
                {
                  label: "朝阳区",
                  value: 2,
                  children: [
                    {
                      label: "前门大街",
                      value: 3,
                    }
                  ]
                }
              ]
            },
            {
              label: "天津市",
              value: 4,
              children: [
                {
                  label: "南开区",
                  value: 5,
                  children: [
                    {
                      label: "天津站",
                      value: 6,
                    }
                  ]
                }
              ]
            }
          ],
          type: "select",
          check: false,
        },
        {
          key: "city",
          label: "市",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          linkage: true,
          linkageLevel: 1,
          linkageKey: 'province',
          linkageGroupFlag: 1,
          options: [],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          key: "area",
          label: "区",
          elType: "select",
          width: 220,
          maxlength: 100,
          valueKey: 'value',
          labelKey: 'label',
          suffixIcon: '',
          prefixIcon: '',
          linkage: true,
          linkageLevel: 2,
          linkageKey: 'city',
          linkageGroupFlag: 1,
          options: [],
          type: "select",
          check: true,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          key: "name",
          label: "姓名",
          options: [],
          elType: "input",
          type: "input",
          check: false,
          width: 220,
        },
        {
          width: 220,
          key: "identity",
          label: "人员",
          elType: "identity",
          check: true,
          treeData: {
            treeId: '',
            orgCodes: [],
            multiple: false,
            lazy: false,
            filterable: false,
            showField: '',
            emptyText: '无数据',
            defaultSelectedList: [],
            expandLevel: 1,
            expandAll: false,
            canSelectNoLeaf: false,
            dialogTitle: '选择组织',
            modalAppendToBody: true,
            appendToBody: false,
            treeTitle: '候选组织',
            noticeText: ''
          },
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ]
        },
        {
          key: "cascaders",
          label: "级联",
          options: [
            {
              value: 1,
              label: '指南',
              children: [
                {
                  value: 2,
                  label: '设计原则'
                }
              ]
            },
            {
              value: 3,
              label: '指南1',
              children: [
                {
                  value: 4,
                  label: '设计原则1'
                }
              ]
            }
          ],
          elType: "cascader",
          check: false,
          width: 220,
          cascaderConfig: {
            multiple: true
          }
        },
        ]
      ],
    }
  },
  computed: {
    additionalShow() {
      return this.tableDataOption.length
    }
  },  
  data() {
    return {
      inputDisabled: false,
      orgComponents: [
        {
          name: 'jdf-org-tree',
          ref: 'orgTree'
        },
        {
          name: 'jdf-identity-tree',
          ref: 'identityTree'
        },
        {
          name: 'jdf-group-org-tree',
          ref: 'groupOrgTree'
        },
        {
          name: 'jdf-group-identity-tree-transfer',
          ref: 'groupIdentityTree'
        }
      ], 
      currentOrg: {
        index: 0,
        key: ''
      },
      treeData: {
        treeId: '',
        orgCodes: [],
        multiple: false,
        lazy: false,
        filterable: false,
        showField: '',
        emptyText: '无数据',
        defaultSelectedList: [],
        expandLevel: 1,
        expandAll: false,
        canSelectNoLeaf: false,
        dialogTitle: '选择组织',
        modalAppendToBody: true,
        appendToBody: false,
        treeTitle: '候选组织',
        noticeText: '',
        groupCode: '',
        identityId: '',
        identities: [],
        groupJson: '',
        candidateCommonGroup: false,
        loginName: '',
        defaultSelectedEachOrgFirst: 0
      },
      baseForm: {
        tableList: [],
      },
      multipleSelection: [],
      tableDataMap: []
    };
  },
  mounted() {
    const that = this
    this.$nextTick(() => {
      that.baseForm.tableList = cloneDeep(that.tableData)
      that.tableDataMap = cloneDeep(that.tableDataOption)
    })
  },
  methods: {
    handleChange() {},
    commonInput(val, item, index) {
      if (val !== '') {
        if (item.linkage) {
          // val对应的下标
          let itemIndex = item.options.map(item => item.value).indexOf(val)
          if (item.options[itemIndex]?.children?.length) {

            // this.tableDataMap[index].filter(items => {
            //   return items.linkage && items.linkageKey === item.key && items.linkageGroupFlag === item.linkageGroupFlag
            // })[0].options = item.options[itemIndex].children;
            
            let sArr = []
            // 清除options
            this.tableDataMap[index].filter(cur => {
              if(cur?.linkage) {
                return (cur.linkageGroupFlag === item.linkageGroupFlag) && (cur.linkageLevel > item.linkageLevel)
              }
            }).forEach(ele => {
              ele.options = []
            })
            // 设置options
            this.tableDataMap[index].forEach((items, indexs) => {
              if (items.linkage) {
                if (items.linkageGroupFlag === item.linkageGroupFlag) {
                  sArr.push(items.linkageLevel)
                  if (items.linkageKey === item.key) {
                    // this.$set(this.tableDataMap[index][indexs], 'options', cloneDeep(item.options[itemIndex].children))
                    items.options = item.options[itemIndex].children 
                  }
                  if(items.linkageLevel > item.linkageLevel) {
                    this.$set(this.baseForm.tableList[index], items.key, '')
                  }
                }
              }
            })
            // let afterFlag = sArr.reduce((a,b) => a>b ? a:b)
            // this.tableDataMap[index].forEach(cur => {
            //   if(cur?.linkage) {
            //     // 在当前层级下的输入框清空
            //     if ((cur.linkageGroupFlag === item.linkageGroupFlag) && (cur.linkageLevel > item.linkageLevel)) {
            //       console.log(cur, 'cur');
            //       this.baseForm.tableList[index][cur.key] = ''
            //     }
            //   }
            // })
          }
        }
      } else {
        this.tableDataMap[index].filter(cur => {
          if(cur?.linkage) {
            return (cur.linkageGroupFlag === item.linkageGroupFlag) && (cur.linkageLevel > item.linkageLevel)
          }
        }).forEach(ele => {
          this.baseForm.tableList[index][ele.key] = ''
          ele.options = []
        })
      }
    },
    // 修改
    disabledClick() {
      this.inputDisabled = !this.inputDisabled
    },
    tableRowClassName(row) {
      row.row.rowIndex = row.rowIndex;
    },
    // 群组人员dialog
    async groupIdentityOpen() {
      this.$refs.identityTree.show();
    },
    // 群组组织dialog
    async groupOrgOpen() {
      this.$refs.orgTree.show();
    },
    // 人员dialog
    async identityOpen() {
      this.$refs.identityTree.show();
    },
    // 组织/人员/群组组织/群组人员 dialog
    async open(index, key, ref) {
      this.currentOrg = { index, key }
      this.orgIndex = index
      let itemIndex = this.tableDataMap[index].map(item => item.key).indexOf(key)
      this.treeData = {...this.treeData, ...this.tableDataMap[index][itemIndex].treeData}
      this.$refs[ref].show();
    },
    selectOrg(data) {
      this.baseForm.tableList[this.currentOrg.index][this.currentOrg.key] = data
    },
    // 多条删除
    deleteAll() {
      if (this.multipleSelection.length) {
        this.$confirm("确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let arr = [];
          if (this.multipleSelection.length) {
            this.multipleSelection.forEach((item) => {
              arr.unshift(item.rowIndex);
            });
          }
          arr.forEach((item) => {
            this.baseForm.tableList.splice(item, 1);
          });
        });
      }
    },
    // 数据校验
    check() {
      this.$refs.baseForm.validate((valid) => {
        if (valid) {
          this.$confirm("您确定【提交】？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$emit('check', this.baseForm.tableList)
          });
        }
      });
    },
    submit() {},
    // 单行删除
    deleteRow(index) {
      this.$confirm("确定删除此行？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.baseForm.tableList.splice(index, 1);
      });
    },
    // 新增一行
    add() {
      if (this.tableDataOption.length) {
        this.baseForm.tableList.push({});
        let rowData = cloneDeep(this.tableDataOption[0])
        this.tableDataMap.push(rowData)
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
